<template>
  <div>
    <el-card style="width: 80%; margin-right: 10%; margin-left: 10%;">

      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <div slot="title" class="clearfix" >
            <div style="font-size: 20px" >默认填写项设置</div>
          </div>
          <div style="border-top: 1px solid #eaeaea; margin-bottom: 15px"/>
          <el-form ref="form" :model="defaultLog" label-width="80px" >
            <el-form-item label="默认职业">
              <el-select v-model="defaultLog.discipline" placeholder="请选择职业" >
                <el-option
                    v-for="item of disciplineNameMap"
                    :key="item[0]"
                    :label="item[1]"
                    :value="item[0]"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="默认完成">
              <el-switch v-model="defaultLog.completed" />
            </el-form-item>
          </el-form>
          <el-form :model="timeSetting" label-width="80px">
            <el-form-item label="默认时间">
              <el-select v-model="timeSetting.value" placeholder="请选择时间" >
                <el-option
                    v-for="item in TIME_SETTING"
                    :key="item"
                    :label="TIME_SETTING[item]"
                    :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>

        </el-collapse-item>
      </el-collapse>

    </el-card>

    <el-card style="width: 80%; margin-right: 10%; margin-left: 10%;">

      <el-collapse v-model="activeNames">
        <el-collapse-item name="2">
          <div slot="title" class="clearfix" >
            <div style="font-size: 20px" >导入excel时的表头识别设置</div>
          </div>
          <div style="border-top: 1px solid #eaeaea; margin-bottom: 15px"/>

          <el-form ref="form" label-position="left" :model="excelKey" label-width="120px" >
            <el-form-item label="本站叫法">
              对应的excel表格的第一行的表头
            </el-form-item>
            <el-form-item label="完成场次:">
              <el-input v-model="excelKey.count"/>
            </el-form-item>
            <el-form-item label="副本:">
              <el-input v-model="excelKey.dungeon"/>
            </el-form-item>
            <el-form-item label="职业:">
              <el-input v-model="excelKey.discipline"/>
            </el-form-item>
            <el-form-item label="完成情况:">
              <el-input v-model="excelKey.completed"/>
            </el-form-item>
            <el-form-item label="描述:">
              <el-input v-model="excelKey.description"/>
            </el-form-item>
            <el-form-item label="图片链接:">
              <el-input v-model="excelKey.image"/>
            </el-form-item>
            <el-form-item label="日期:">
              <el-input v-model="excelKey.date"/>
            </el-form-item>
            <el-form-item label="时间:">
              <el-input v-model="excelKey.time"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>

    </el-card>

    <el-card style="width: 80%; margin-right: 10%; margin-left: 10%;">

      <el-collapse v-model="activeNames">
        <el-collapse-item name="3">
          <div slot="title" class="clearfix" >
            <div style="font-size: 20px" >导入excel时的自动替换设置(把你的叫法替换成我这边的叫法)</div>
          </div>
          <div style="border-top: 1px solid #eaeaea; margin-bottom: 15px"/>
          <el-form ref="form" label-position="left" :model="logFormatSetting" label-width="120px">
            <!--        当完成情况为这个值时识别为完成:-->
            <el-form-item label="完成情况：">
              <el-col :span="1">完成</el-col>
              <el-col :span="1">-</el-col>
              <el-col :span="22"><el-input v-model="logFormatSetting.completed"/></el-col>
            </el-form-item>

            <el-divider></el-divider>

            <el-form-item label="职业映射：">
              <div v-for="(item, i) in logFormatSetting.disciplineMap" :key="i">
                <el-row style="margin-bottom: 10px">
                  <el-col :span="1">{{ disciplineNameMap.get(logFormatSetting.disciplineMap[i][0]) }}</el-col>
                  <el-col :span="1">-</el-col>
                  <el-col :span="22"><el-input v-model="logFormatSetting.disciplineMap[i][1]"/></el-col>
                </el-row>
              </div>
            </el-form-item>

          </el-form>
        </el-collapse-item>
      </el-collapse>

    </el-card>

    <el-card style="width: 80%; margin-right: 10%; margin-left: 10%;">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="4">
          <div slot="title" class="clearfix" >
            <div style="font-size: 20px" >远程仓库设置</div>
          </div>
          <div style="border-top: 1px solid #eaeaea; margin-bottom: 15px"/>
          <el-form label-position="left" :model="giteeSetting" label-width="120px" >

            <el-form-item label="access_token:">
              <el-input v-model="giteeSetting.access_token"/>
            </el-form-item>
            <el-form-item label="持有者:">
              <el-input v-model="giteeSetting.owner"/>
            </el-form-item>
            <el-form-item label="仓库名:">
              <el-input v-model="giteeSetting.repo"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-card>



    <div style="height: 70px"></div>

    <el-button type="primary" plain style="width: 10%; height: 50px; position: fixed; bottom: 3%; margin-left: 40%" @click="onSaveSettings">保存设置</el-button>
  </div>
</template>

<script>
import {getDefaultLog, getExcelKey, getLogFormatSettings, saveSettings, getTimeSetting, getGiteeSetting } from "@/api/settings";
import {DisciplineName, TIME_SETTING} from "@/consts/Consts";

export default {
  name: "KaiDaoSettings",
  data() {
    return {
      TIME_SETTING: TIME_SETTING,
      activeNames: ['1','2','3', '4'],
      defaultLog: getDefaultLog(),
      timeSetting: getTimeSetting(),
      excelKey: getExcelKey(),
      logFormatSetting: getLogFormatSettings(),
      giteeSetting: getGiteeSetting(),
      disciplineNameMap: new Map(DisciplineName),
    }
  },
  methods: {
    test() {
      console.log(this.giteeSetting)
    },
    onSaveSettings(){
      saveSettings()
      this.$message({
        message: '设置保存成功',
        type: 'success'
      });
    }
  },
  beforeRouteLeave: (to, from, next) => {
    saveSettings()
    next();
  }
}
</script>

<style scoped>

</style>